<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淬火计算</title>
    <style>
        #tooltip,
        #result {
            margin: 0 1em;
            padding: 1em;
            font-size: 1.5em;
        }

        #result span {
            display: block;
            margin: 1em 0;
        }
    </style>
    <link href="https://cdn.bootcdn.net/ajax/libs/pure/2.0.5/pure.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(() => {
            const display = () => {
                const lvMin = parseInt($('#lvs').val()), lvMax = parseInt($('#lve').val());
                const pi = parseInt($('#place').val());
                const ret = calc(lvMin, lvMax, pi);
                const th = $('#total thead>tr').empty(), tr = $('#total tbody>tr').empty();
                const info = $('#info>div').empty();
                if (ret) {
                    const total = ret[0], count = ret[1], residue = ret[2];
                    const ns = names[$('#name').val()];
                    if (ns) {
                        for (let i = 0; i < ns.length; i++) {
                            th.append(`<th>${ns[i]}</th>`);
                            tr.append(`<td>${total[i]}</td>`);
                        }
                    }
                    let html = '';
                    for (let i = 0; i < count.length; i++) {
                        if (count[i] > 0) {
                            html += `<div>${placeLevel[i]} = ${count[i]}<div>`;
                        }
                    }

                    let r = '';
                    for (let i = 0; i < residue.length; i++) {
                        if (residue[i] > 0) {
                            r += `<div>${ns[i]} = ${residue[i]}<div>`;
                        }
                    }
                    if (r.length > 0) {
                        html += '<span>缺少(灵脉光渊等级不足):</span>' + r;
                    }
                    info.html(html);
                }
            };
            const option = (parent, val, text) => {
                const opt = $('<option></option>');
                opt.val(val);
                if (text) {
                    opt.text(text);
                } else {
                    opt.text(val);
                }
                parent.append(opt);
            };
            for (let i = 0; i < consume.length; i++) {
                option($('#lvs'), i, i + 1);
                option($('#lve'), i, i + 1);
            }
            for (let n in names) {
                option($('#name'), n);
            }
            for (let i = 0; i < placeLevel.length; i++) {
                option($('#place'), i, placeLevel[i]);
            }
            $('select').on('change', display);
            $('#btnCalc').click(display);
        });
    </script>
</head>

<body>
    <div>
        <div id="tooltip">根据NGA论坛天地劫手游板块的<a href="https://bbs.nga.cn/read.php?tid=26330724&_ff=771"
                target="_blank">帖子数据</a>制作</div>
        <form class="pure-form pure-form-aligned">
            <fieldset>
                <div class="pure-control-group">
                    <label for="lvs">等级:</label> 从<select id="lvs"></select> 至 <select id="lve"></select>
                </div>
                <div class="pure-control-group">
                    <label for="name">属性:</label> <select id="name"></select>
                </div>
                <div class="pure-control-group">
                    <label for="place">灵脉光渊最高等级:</label> <select id="place"></select>
                </div>
                <!--
                <div class="pure-controls">
                    <button id="btnCalc" class="pure-button">计算</button>
                </div>
                -->
            </fieldset>
        </form>
        <div id="result">
            <div id='total'>
                <span>需要材料总计:</span>
                <table class="pure-table">
                    <thead>
                        <tr></tr>
                    </thead>
                    <tbody>
                        <tr></tr>
                    </tbody>
                </table>
            </div>
            <div id="info">
                <span>需要刷灵脉光渊次数(非精确值, 高额时产出翻倍, 并且因为小数的存在, 每次产出可能相差1个数量):</span>
                <div></div>
            </div>
        </div>
    </div>
</body>
<script>
    const names = {
        '炎': ['燧炎之铁', '燧炎之铜', '燧炎之银', '燧炎之精', '火凛燧炎', '二阶绝材', '金钱'],
        '雷': ['雳刹之铁', '雳刹之铜', '雳刹之银', '雳刹之精', '雷霆雳刹', '二阶绝材', '金钱'],
        '冰': ['寒幽之铁', '寒幽之铜', '寒幽之银', '寒幽之精', '凌霜寒幽', '二阶绝材', '金钱'],
        '暗': ['暗厉之铁', '暗厉之铜', '暗厉之银', '暗厉之精', '九幽暗厉', '二阶绝材', '金钱'],
        '光': ['晔星之铁', '晔星之铜', '晔星之银', '晔星之精', '华晶晔星', '二阶绝材', '金钱']
    };
    //0-59
    const consume = [
        [0, 0, 0, 0, 0, 0, 0],
        [1, 0, 0, 0, 0, 0, 10],
        [1, 0, 0, 0, 0, 0, 20],
        [1, 0, 0, 0, 0, 0, 30],
        [2, 0, 0, 0, 0, 0, 40],
        [2, 0, 0, 0, 0, 0, 50],
        [2, 0, 0, 0, 0, 0, 60],
        [3, 0, 0, 0, 0, 0, 70],
        [3, 0, 0, 0, 0, 0, 80],
        [3, 0, 0, 0, 0, 0, 90],
        [4, 0, 0, 0, 0, 0, 100],
        [4, 0, 0, 0, 0, 0, 110],
        [4, 0, 0, 0, 0, 0, 120],
        [5, 0, 0, 0, 0, 0, 130],
        [5, 0, 0, 0, 0, 0, 140],
        [5, 1, 0, 0, 0, 0, 150],
        [5, 1, 0, 0, 0, 0, 160],
        [5, 1, 0, 0, 0, 0, 170],
        [5, 2, 0, 0, 0, 0, 180],
        [5, 2, 0, 0, 0, 0, 190],
        [5, 2, 0, 0, 0, 0, 200],
        [5, 3, 0, 0, 0, 0, 210],
        [5, 3, 0, 0, 0, 0, 220],
        [5, 3, 0, 0, 0, 0, 230],
        [5, 4, 1, 0, 0, 0, 240],
        [5, 4, 1, 0, 0, 0, 250],
        [5, 4, 1, 0, 0, 0, 260],
        [5, 5, 1, 0, 0, 0, 280],
        [5, 5, 2, 0, 0, 0, 300],
        [5, 5, 2, 0, 0, 0, 350],
        [5, 5, 2, 0, 0, 0, 400],
        [5, 5, 2, 0, 0, 0, 450],
        [5, 5, 3, 0, 0, 0, 500],
        [5, 5, 3, 0, 0, 0, 550],
        [0, 5, 3, 1, 0, 0, 600],
        [0, 5, 3, 2, 0, 0, 650],
        [0, 5, 4, 2, 0, 0, 700],
        [0, 5, 4, 3, 0, 0, 750],
        [0, 5, 4, 3, 0, 0, 800],
        [0, 5, 4, 3, 0, 0, 850],
        [0, 5, 5, 4, 0, 0, 900],
        [0, 5, 5, 4, 0, 0, 950],
        [0, 5, 5, 4, 0, 0, 1000],
        [0, 5, 5, 5, 0, 0, 1100],
        [0, 0, 6, 5, 1, 0, 1200],
        [0, 0, 6, 5, 2, 0, 1300],
        [0, 0, 6, 5, 3, 0, 1400],
        [0, 0, 6, 5, 3, 0, 1500],
        [0, 0, 7, 6, 4, 0, 1600],
        [0, 0, 7, 6, 4, 0, 1700],
        [0, 0, 7, 6, 5, 0, 1800],
        [0, 0, 7, 7, 5, 0, 1900],
        [0, 0, 8, 7, 6, 0, 2000],
        [0, 0, 8, 7, 6, 0, 2100],
        [0, 0, 0, 8, 7, 1, 2200],
        [0, 0, 0, 8, 7, 3, 2300],
        [0, 0, 0, 8, 8, 5, 2400],
        [0, 0, 0, 9, 8, 7, 2500],
        [0, 0, 0, 9, 9, 8, 2600],
        [0, 0, 0, 9, 9, 9, 2700]
    ];
    const placeLevel = [10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60];
    const produce = [
        [13, 0, 0, 0, 0, 0], //10
        [14, 3, 0, 0, 0, 0], //15
        [13, 4, 0, 0, 0, 0], //20
        [14, 5, 2, 0, 0, 0], //25
        [15, 5, 2, 0, 0, 0], //30
        [0, 8, 2, 1, 0, 0], //35
        [0, 7, 4, 3, 0, 0], //40
        [0, 0, 3, 3, 1, 0], //45
        [0, 0, 5, 3, 2, 0], //50
        [0, 0, 0, 4, 2, 1], //55
        [0, 0, 0, 4, 3, 1] //60
    ];
    const calc = (lvMin, lvMax, placeIndex) => {
        const ls = parseInt(lvMin), le = parseInt(lvMax);
        if (le <= ls) {
            alert('Level invalid');
        } else {
            const total = new Array(consume[ls].length).fill(0);
            for (let i = ls; i <= le; i++) {
                const item = consume[i];
                for (let n = 0; n < item.length; n++) {
                    total[n] += item[n];
                }
            }
            //console.log(ret);
            const residue = total.slice(0, total.length - 1);
            const count = new Array(placeLevel.length).fill(0);
            for (let r = residue.length - 1; r >= 0; r--) {
                if (residue[r] <= 0) {
                    continue;
                }
                for (let i = placeIndex; i >= 0; i--) {
                    const item = produce[i];
                    if (item[r] > 0) {
                        let c = Math.ceil(residue[r] / item[r]);
                        count[i] = c;
                        for (let n = 0; n < item.length; n++) {
                            residue[n] -= item[n] * c;
                        }
                        break;
                    }
                }
            }
            //console.log(count);
            return [total, count, residue];
        }
    };
</script>

</html>